<template>
	<view class="UserFeature">
		<view class="FeatureIcon">
			<uni-icons :type="featureData.icon" size="25" color="#26b38b"></uni-icons>
		</view>
		<view class="FeatureName">
			{{featureData.title}}
		</view>
		<view class="FeatureNumber">
			{{featureData.num}}
		</view>
		<view class="FeatureView">
			<uni-icons v-if="featureData.showMore" type="forward" size="20" color="#8d8d8d"></uni-icons>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<button class="btnFillAll" :open-type="featureData.openType" v-if="!featureData.showMore">联系客服</button>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<button class="btnFillAll" @click="featureData.funcH5">H5点击事件</button>
		<!-- #endif -->

	</view>
</template>

<script setup>
	const props = defineProps({
		featureData: {
			type: Object,
			default: {
				//数据格式
				icon: "download-filled",
				title: "我的下载",
				num: 9999,
				showMore: true
			}

		}
	})
</script>

<style lang="scss" scoped>

	.UserFeature {
		height: 100rpx;
		border-bottom: 2rpx solid #ccc;
		display: flex;
		position: relative;

		&:nth-last-of-type(1) {
			border: none;
		}

		.FeatureIcon {
			@include flexCenter();
			padding: 0 20rpx 0 30rpx;
		}

		.FeatureName {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 30rpx;
			color: #3e3e3e;
			font-weight: bold;
			width: 200rpx;
		}

		.FeatureNumber {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-grow: 1;
			color: #8d8d8d;
		}

		.FeatureView {
			padding: 0 35rpx 0 15rpx;
			@include flexCenter();
		}

		.btnFillAll {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: none;
			@include flexCenter();
			opacity: 0.5;
		}

	}

	// }
</style>